<template>
  <!-- amount box -->
  <view class="flex-col-hcenter" style="background: #eff4f8">
    <view style="padding: 30rpx 14rpx 36rpx; background: #fff">
      <view class="amount-box">
        <view style="color: #666">充值金额</view>
        <view class="tar" style="font-size: 48rpx; color: #333">{{ amount }}</view>
        <view class="tar" style="color: #333">元</view>
      </view>
    </view>
  </view>
  <!-- IntKeyPad -->
  <IntKeyPad confirmKeyText="充值" @key-click="keyClick" @confirm="toPay" />
  <!-- tip -->
  <view class="flex-hcenter tip-box">
    <view>点击充值表示已经确认阅读并同意</view>
    <view class="rule-btn" @click="navTo('account/terms')">充值规则</view>
  </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/navigator';
import { showToast } from '@/utils/prompt';
import IntKeyPad from '@c/common/IntKeyPad.vue';
import { ref } from 'vue';
// data
const amount = ref('');

function keyClick(key: string) {
  const val = amount.value;
  if (val === '' && (key === 'backspace' || key === '0')) {
    return;
  } else if (key === 'backspace') {
    amount.value = val.slice(0, -1);
  } else if (val.length < 7) {
    amount.value += key;
  } else {
    showToast('请勿输入过大金额');
  }
}

const emit = defineEmits(['toPay']);

function toPay() {
  if (amount.value === '') {
    showToast('请输入金额');
  } else {
    const payload = Number.parseInt(amount.value);
    emit('toPay', payload);
  }
}
</script>

<style scoped lang="less">
.amount-box {
  height: 104rpx;
  padding-right: 30rpx;
  padding-left: 22rpx;
  background-color: #eff4f8;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 130rpx 490rpx 50rpx;
  align-items: center;
}

.tip-box {
  font-size: 24rpx;
  letter-spacing: 2rpx;
  color: #666;
  margin: 0;
  padding-bottom: 36rpx;
  box-sizing: border-box;
  background-color: #eff4f8;
}
.rule-btn {
  color: #1b91ff;

  &::before {
    content: '<';
  }

  &::after {
    content: '>';
  }
}
</style>
